<c-layouts.with-sidebar>
    <h1>Configuration</h1>

    <p>The following configuration can be provided in your `settings.py`:</p>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <div>
            <code class="!text-teal-600">COTTON_DIR</code>
            <div class="text-sm">str (default: 'cotton')</div>
        </div>
        <div>
            Change the default path in your templates directory where cotton components can be placed, for example "components".
        </div>
    </div>

    <c-hr />

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <div>
            <code class="!text-teal-600">COTTON_BASE_DIR</code>
            <div class="text-sm">str (default: None)</div>
        </div>
        <div>
            The base directory where - in addition to the app folders - cotton will search for the "templates" directory (see above).
            If not set, the <code class="!text-teal-600">BASE_DIR</code> generated by `django-admin startproject` is used as a fallback, if it exists.
        </div>
    </div>

    <c-hr />

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <div>
            <code class="!text-teal-600">COTTON_SNAKE_CASED_NAMES</code>
            <div class="text-sm">bool (default: True)</div>
        </div>
        <div>
            <div class="mb-4">By default cotton will look for snake case versions of your component names. To turn this behaviour off (useful if you want to permit hyphenated filenames) then set this key to <code class="!text-teal-600">False</code>.</div>

            <div class="mb-4">
                <h6 class="mb-1">Example:</h6>
                <code class="!text-teal-600">{{ '<c-my-button />'|force_escape }}</code>
            </div>

            <div class="mb-4">
                <h6><code class="!text-teal-600">True</code> (default)</h6>
                Filepath: `cotton/my_button.html`
            </div>

            <div>
                <h6><code class="!text-teal-600">False</code></h6>
                Filepath: `cotton/my-button.html`
            </div>

        </div>
    </div>

</c-layouts.with-sidebar>
